<!--  -->
<template>
  <a-modal
    width="50%"
    title="查看文件"
    :visible="viewFileVisible"
    :footer="null"
    @cancel="handleCancel"
  >
    <div class="pdf">
      <a target="_blank" :href="item | dealImageUrl" v-for="(item, index) in pdfData" :key="index">{{ pdfName[index] }}</a>
    </div>
    <div class="image">
      <img :src="item | dealImageUrl" v-for="(item, index) in imgData" :key="index">
    </div>
  </a-modal>
</template>

<script>
export default {
  props: {
    viewFileVisible: {
      type: Boolean,
      default: false
    }
  },
  data () {
    return {
      fileData: [],
      imgData: [],
      pdfData: [],
      pdfName: []
    }
  },
  created () {
  },
  methods: {
    // 处理数据
    handleData (viewFileData) {
      this.imgData = []
      this.pdfData = []
      const formatImg = /(\.(gif|png|jpg|jpeg|webp|svg|psd|bmp|tif))$/i
      const formatPdf = /(\.(pdf))$/i
      viewFileData.forEach(item => {
        if (formatPdf.test(item.fileName)) {
          this.pdfName.push(item.fileName)
          this.pdfData.push(item.fileUrl)
        }
        if (formatImg.test(item.fileName)) {
          this.imgData.push(item.fileUrl)
        }
      })
    },
    // 关闭弹窗
    handleCancel () {
      this.$emit('closeViewFile')
    }
  }
}
</script>
<style scoped lang="less">
  .pdf {
    margin: 0 auto;
    text-align: center;
  }
  .image {
    img {
      display: block;
      width: 80%;
      margin: 10px auto;
    }
  }
</style>
